<template>
  <div id="input"><el-input v-model="search" placeholder="想搜什么" /></div>
  <el-button type="primary" id="button" @click="onSearch">搜索</el-button>
  <div class="bmap" id="container"></div>
</template>

<script>
export default {
  name: "BmapDemo",
  data() {
    return {
      search: "",
    };
  },
  mounted() {
    var map = new window.BMapGL.Map("container"); // 创建地图实例
    var point = new window.BMapGL.Point(116.404, 39.915); // 创建点坐标
    map.centerAndZoom(point, 14); // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    map.setMapStyleV2({
      styleId: "39b87f1090df68848cc7af95e8bb4901", //个性化样式
    });

    var marker1 = new window.BMapGL.Marker(
      new window.BMapGL.Point(116.432, 39.815)
    );
    var marker2 = new window.BMapGL.Marker(
      new window.BMapGL.Point(116.498, 39.985)
    );
    var marker3 = new window.BMapGL.Marker(
      new window.BMapGL.Point(116.84, 39.919)
    );

    map.addOverlay(marker1); // 将标注添加到地图中
    map.addOverlay(marker2);
    map.addOverlay(marker3);

    // let ws = new WebSocket("wss://3098l4z890.picp.vip/websocket/getmeg");
    // ws.onmessage = (info) => {
    //   console.log(info);

    //   var obj = JSON.parse(info.data);
    //   var lat = JSON.parse(obj.LightSwitch.lat);
    //   var lng = JSON.parse(obj.LightSwitch.lng);

    //   var pointdev = new window.BMapGL.Point(lat, lng); // 创建点坐标
    //   var marker = new window.BMapGL.Marker(pointdev); // 创建标注
    //   map.addOverlay(marker); // 将标注添加到地图中
    //   console.log(lat);
    //   console.log(lng);
    // };
  },
  methods: {
    onSearch() {
      var map = new window.BMapGL.Map("container"); // 创建地图实例
      var point = new window.BMapGL.Point(116.404, 39.915); // 创建点坐标
      map.centerAndZoom(point, 10); // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      map.setMapStyleV2({
        styleId: "39b87f1090df68848cc7af95e8bb4901", //个性化样式
      });

      //城市检索
      var local = new window.BMapGL.LocalSearch(map, {
        renderOptions: { map: map },
      });
      local.search(this.search);
    },
  },
};
</script>

<style scoped>
.bmap {
  width: 99%;
  height: 90%;
  margin-top: 60px;
  border: 1px solid #000;
}

#input {
  position: absolute;
  top: 20px;
  height: 40px;
  width: 300px;
}

#button {
  position: absolute;
  top: 86px;
  left: 520px;
}
</style>
